<template>
	<view :class="themeColor">
		<view class="invoice-title-panel">
			<view class="upper-panel flex">
				<view class="title-name flex">
					<text>{{card.title}}</text>
					<view class="default-tag" v-if="card.is_def">{{$zhTran('默认')}}</view>
				</view>
				<view class="type-tag" :class="[card.title_type == 0 ? 'personal' : 'enterprise']">
					{{$zhTran(card.title_type_desc+ card.type_desc)}}
				</view>
			</view>
			<view class="main-panel flex">
				<view class="title-info">
					<text class="mailbox">{{$zhTran('联系邮箱') }} {{card.email||''}} </text>
					<text class="mobile" v-if="card.title_type == 0">{{ $zhTran('联系电话 ')+ (card.mobile||'') }}</text>
					<text class="mobile" v-else>{{ $zhTran('企业税号 ')+card.duty_num}}</text>
				</view>
				<block v-if="!footerShow">
					<view class="btn edit" @click.stop="invoiceTitleEdit(card.id)">
						{{$zhTran('编辑')}}
					</view>
				</block>
			</view>
			<view class="footer-panel" v-if="footerShow">
				<view class="btn edit" @click.stop="invoiceTitleEdit(card.id)">
					{{$zhTran('编辑')}}
				</view>
				<view class="btn del" @click.stop="invoiceTitleDel(card)">
					{{ $zhTran('删除') }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		apiDeleteUserIncoice
	} from "@/api/invoice"
	export default {
		props: {
			card: {
				type: Object,
				default: {}
			},
			footerShow: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {

			}
		},
		methods: {
			invoiceTitleEdit(id) {
				this.$Router.push({
					path: "/bundle3/pages/invoice/add_invoice",
					query: {
						id
					}
				})
			},
			invoiceTitleDel(row) {
				var vm = this
				uni.showModal({
					title: this.$zhTran("提示"),
					content: this.$zhTran("确定删除抬头：" + row.title + "？"),
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: vm.$zhTran('正在删除中')
							})
							apiDeleteUserIncoice({
								id: row.id
							}).then((res) => {
								vm.$toast({
									title: vm.$zhTran('删除成功'),
									endtime: 1200
								});
								vm.$emit('refresh')
							}).finally(() => {
								uni.hideLoading()
							})
						}
					},
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.invoice-title-panel {
		margin: 10px;
		padding: 16px 17px 13px 16px;
		background: #fff;
		border-radius: 5px;

		.upper-panel {
			align-items: center;
			justify-content: space-between;

			.title-name {
				align-items: center;

				text {
					font-size: 14px;
					font-weight: 700;
					color: #333333;
				}

				.default-tag {
					width: 27px;
					height: 13px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #D43030;
					font-size: 10px;
					text-align: center;
					border: 0.8px solid #D43030;
					margin-left: 3px;
				}

			}

			.type-tag {
				padding: 0 15rpx;
				height: 21px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 11px;
				background: #FFF7E6;
				color: #D69027;

				&.enterprise {
					background: #FEEDF0;
					color: #D43030;
				}

			}

		}

		.main-panel {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
		}

		.title-info {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			margin-top: 6px;

			.mailbox,
			.mobile {
				font-size: 12px;
				font-weight: 400;
				color: #666666;
				margin-bottom: 5px;
			}
		}

		.footer-panel {
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.btn {
				display: flex;
				align-items: center;
				font-size: 12px;
				font-weight: 400;
				color: #333333;

				&:first-child {
					margin-right: 20px;
				}

				.icon {
					width: 10px;
					height: 10px;
				}
			}

		}

	}
</style>